// const { default: axios } = require("axios");

//==============================渲染函数
function render(data) {
    let str = ``
    str = data.list.map((item, index) => {
        return `<tr>
                        <td>${item.email}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.ingroup}</td>
                        <td>${item.isadmin ? "是" : "否"}</td>
                        <td>${item.status ? `<button>正常</button>` : `<button class="active">异常</button>`}</td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            <span class="iconfont icon-shanchu "data-phone="${item.phone}"></span>
                        </td>
                    </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML = str;
}


//axios全局设置 请求拦截器
axios.interceptors.request.use( 
    (config)=>{  //这个回调函数 在每次发请求到服务器端之前 都会调用执行
        //设置请求头参数
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config;
    },
    (error)=>{
        return Promise.reject(error)
    }
)

//axios全局设置 响应拦截器
axios.interceptors.response.use( 
    (res)=>{  //这个回调函数 在每次请求从服务器端返回到浏览器之前 都会调用执行
        return res;
    },
    (error)=>{ //每次请求发生错误, 都会调用执行

        if( error.response.status == 401 ){
            //alert('登陆过期!需要重新登录');
            localStorage.removeItem('token');
            location.href = './login.html';

        }else if( error.response.status == 404 ){
            alert('访问路径有误!');
        }else if( error.response.status == 500 ){
            alert('服务器内部错误!');
        }

        return Promise.reject(error)
    }
)



//===========================翻页功能
//获取上一页，下一页按钮
const buts = document.querySelectorAll('.box main .btn button')
// 设置初始请求参数
let page = 1;
let count = 10;
//======给按钮绑定点击事件，发送ajax请求，传参数
buts[0].onclick = () => {
    page <= 1 ? page = 1 : page--
    axios.get('/user/list', { params: { page: page, count: count } }).then((res) => {
        render(res.data)
    })
}
buts[1].onclick = () => {
    page++
    axios.get('/user/list', { params: { page: page, count: count } }).then((res) => {
        render(res.data)
    })
}


//========================搜索按钮功能
// 获取搜索按钮
const searchBtn = document.querySelector('.box .search button')
// 获取输入框按钮
const inputEle = document.querySelector('.box .search input')
//给button按钮设置点击事件，发送请求，获取数据
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data)
    })
}

//========================删除按钮功能
let table = document.querySelector('table')
//事件委托
table.onclick = (e) => {
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            render(res.data)
        })
    }
}